import React from 'react'
class TestComponent extends React.Component {
  state = {
    count: 0,
    List: [1, 2, 3],
    person: {
      name: 'Jack',
      like:'eat'
    },
  }
  changeCount = () => {
    this.setState({
      count: this.state.count + 1,
    })
  }
  //数组修改
  changeList = () => {
    this.setState({
      List: [...this.state.List, 4, 5],
    })
  }
  //对象修改
  personChange=()=>{
    this.setState({
        person:{
            ...this.state.person,
            name:'rose'
        }
    })
  }
  //删除
  deleList=()=>{
    this.setState({
        List:this.state.List.filter(o=> o !== 1)
    })
  }
  render() {
    return (
      <>
        <ul>
          {this.state.List.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
        <p>{this.state.person.name}喜欢{this.state.person.like}</p>
        <button onClick={this.changeList}>add</button>
        <button onClick={this.personChange}>personChange</button>
        <button onClick={this.deleList}>deleList</button>
        <div>
          count:{this.state.count}
          <button onClick={this.changeCount}>count</button>
        </div>
      </>
    )
  }
}
function App() {
  return (
    <div>
      <TestComponent></TestComponent>
    </div>
  )
}
export default App
